<template>
  <div>
    <button :disabled="current <= 1" @click="emiter('change', current - 1)">&lt;</button>
    <!-- <span>{{ current }}</span> -->
    <button
      v-for="item in pager"
      :key="item"
      :class="{ active: item == current }"
      @click="emiter('change', item)"
    >
      {{ item }}
    </button>
    <button :disabled="current >= total / size" @click="emiter('change', current + 1)">
      &gt;
    </button>
  </div>
</template>
<style scoped>
.active {
  color: #f70;
}
</style>
<script setup>
import { ref, watch } from "vue";
var props = defineProps({
  current: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  size: { type: Number, default: 10 },
});
// 定义事件发送器(当current发生变化时候创建)
const emiter = defineEmits(["change"]);
const pager = ref([]);
// pager 应该动态被创建 左边长度 3个,右边长度也是3个 current为中间点

// 动态创建pager ,start 为左边界 end为右边界
function makePager() {
  pager.value = [];
  var start = Math.max(props.current - 3, 1);
  var end = Math.min(Math.ceil(props.total / props.size), props.current + 3);
  if(end-start<6){
    start=Math.max(end-6,1)
    end = Math.min(Math.ceil(props.total / props.size), start + 6);
  }
  //场景数组
  for (var i = start; i <= end; i++) {
    pager.value.push(i);
  }
}
// 默认执行一次
makePager();
// 当props变化再执行一次
watch(
  props,
  () => {
    makePager();
  },
  { deep: true }
);
</script>
